import React, { useState } from 'react'
import { Popup, Input } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'


export default function Login() {
    const navigate = useNavigate()
    const [fase, setFase] = useState(false)
    const [isLoading, setIsLoading] = useState(false) // 加载状态
    const [isShow,setIsshow] = useState(false)
    const dh = JSON.parse(localStorage.getItem('dh'))

    // 模拟获取本机手机号（实际项目中需要替换为真实获取逻辑）
    const getPhoneNumber = async () => {
        if (!fase) {
            alert('请先同意隐私政策与用户协议')
            return
        }

        setIsLoading(true)
        
        try {
            // 这里是模拟逻辑，实际项目中可能是：
            // 1. 调用原生接口获取手机号（React Native）
            // 2. 微信/支付宝授权获取
            // 3. 短信验证码流程
            
            // 模拟延迟
            await new Promise(resolve => setTimeout(resolve, 1000))
            
            // 这里用随机生成的手机号模拟
            const prefixes = ['150', '159', '138', '186']
            const randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)]
            const randomNumber = Math.floor(10000000 + Math.random() * 90000000)
            const mockPhone = randomPrefix + randomNumber.toString().slice(0, 8)
            localStorage.setItem('dh',JSON.stringify(mockPhone))
            // 根据运营商跳转不同页面
            if (mockPhone.startsWith('15') || mockPhone.startsWith('13')) {
                navigate('/YD') // 移动
            } else if (mockPhone.startsWith('18')) {
                navigate('/DX') // 电信
            } else {
                navigate('/LT') // 联通
            }
            
        } catch (error) {
            console.error('获取手机号失败:', error)
            alert('获取手机号失败，请稍后重试')
        } finally {
            setIsLoading(false)
        }
    }

    const faseButton = () => {
        setFase(!fase)
    }

    const getPhoneNumbers = async () => {
        setVisible1(true)

        setIsLoading(true)
        
        try {
            // 这里是模拟逻辑，实际项目中可能是：
            // 1. 调用原生接口获取手机号（React Native）
            // 2. 微信/支付宝授权获取
            // 3. 短信验证码流程
            
            // 模拟延迟
            await new Promise(resolve => setTimeout(resolve, 1000))
            
            // 这里用随机生成的手机号模拟
            const prefixes = ['150', '159', '138', '186']
            const randomPrefix = prefixes[Math.floor(Math.random() * prefixes.length)]
            const randomNumber = Math.floor(10000000 + Math.random() * 90000000)
            const mockPhone = randomPrefix + randomNumber.toString().slice(0, 8)
            localStorage.setItem('dh',JSON.stringify(mockPhone))
            
        } catch (error) {
            console.error('获取手机号失败:', error)
            alert('获取手机号失败，请稍后重试')
        } finally {
            setIsLoading(false)
        }
    }


    const [visible1, setVisible1] = useState(false);


    const [value, setValue] = useState('')
    const dButton = () => {
        if(value){
            navigate('/my')
        }else{
            alert('请输入姓名')
        }
    }

    return (
        <div style={{ padding:'150px 20px 0 20px' }}>
            {/* 一键登录按钮 - 添加点击事件 */}
            <span 
                className='button_login_yj'
                onClick={getPhoneNumber}
                style={{
                    display: 'block',
                    margin: '20px auto',
                    padding: '18px 0',
                    textAlign: 'center',
                    backgroundColor: '#1677ff',
                    color: 'white',
                    borderRadius: '6px',
                    cursor: 'pointer',
                    opacity: isLoading ? 0.7 : 1
                }}
            >
                {isLoading ? '正在获取...' : '本机号码一键登录'}
            </span>
            
            <span className='button_login_Ap' onClick={() => { getPhoneNumbers() }}>
                <img width={'20px'} src='./iOS.png' alt=''/>通过Apple登录
            </span>
            <span className='button_login_qt' onClick={() => { navigate('/qtLogin') }}>
                其他登录方式<img width={'20px'} src='./dayuhao.png' alt=''/>
            </span>
            
            <div style={{display:'flex',justifyContent:'space-around',marginTop:'70px'}}>
                <div>
                    <img width={'50px'} src='./QQ.png' alt=''/>
                    <p style={{fontWeight:'bold',color:'#444444',textAlign:'center',marginTop:'-2px'}}>QQ登录</p>
                </div>
                <div onClick={() => navigate('/wxin')}>
                    <img width={'50px'} src='./weixin.png' alt=''/>
                    <p style={{fontWeight:'bold',color:'#444444',textAlign:'center',marginTop:'-2px'}}>微信登录</p>
                </div>
            </div>
            
            <div style={{display:'flex',justifyContent:'center', alignItems: 'center', marginTop: '30px'}}>
                <input 
                    type='checkbox' 
                    onChange={(ever)=>{faseButton(ever.target.checked)}}
                    style={{ marginRight: '8px' }}
                />
                <p style={{fontSize:'15px'}}>
                    登录即代表您同意<a href='##'>《隐私政策》</a>与<a href='##'>《用户协议》</a>
                </p>
            </div>
            <Popup
                style={{position:'relative'}}
                visible={visible1} 
                onMaskClick={() => {
                    setVisible1(false);
                }} 
                onClose={() => {
                    setVisible1(false);
                }} 
             
                bodyStyle={
                    isShow?
                    {
                        height: '40vh',
                        backgroundColor: '#CDCED0'
                    }
                    :
                    { 
                        height: '70vh',
                        backgroundColor: '#CDCED0'
                    }
                }
                >
                    <div style={{height:'40px',borderBottom:'1px solid black',display:'flex',alignItems:'center',justifyContent:'space-between',padding:'0 15px'}}>
                            <p style={{margin:'0',fontSize:'16px',fontWeight:'bold'}}>Apple ID</p>
                            <p style={{margin:'0',fontSize:'14px',color:'#3278F6'}} onClick={()=>{ setVisible1(false); }}>取消</p>
                    </div>
                    <div className={isShow?"back1":""}>
                        <div style={{marginTop:'30px'}}>
                            <h1 style={{textAlign:'left',width:'60%',margin:'0 auto'}}>通过Apple登录</h1>
                            <div style={{textAlign:'left',width:'60%',margin:'0 auto',position:'relative'}}>
                                <img style={{width:'30px',position:'absolute',left:'-50px',top:'1px'}} src='./img2.png'/>
                                <h3 style={{margin:'20px 0 0 0'}}>快速简单</h3>
                                <p style={{margin:'0',color:'#908F91'}}>使用已由的Apple ID登录App</p>
                                <p style={{margin:'0',color:'#908F91'}}>和网站。</p>
                            </div>
                            <div  style={{textAlign:'left',width:'60%',margin:'0 auto',position:'relative'}}>
                                <img style={{width:'40px',position:'absolute',left:'-49px',top:'1px'}} src='./img3.png'/>
                                <h3 style={{margin:'20px 0 0 0'}}>尊重您的隐私</h3>
                                <p style={{margin:'0',color:'#908F91'}}>App仅可请求姓名和电子邮件。</p>
                                <p style={{margin:'0',color:'#908F91'}}>Apple绝不会追踪您。</p>
                            </div>
                            <div  style={{textAlign:'left',width:'60%',margin:'0 auto',position:'relative'}}>
                                <img style={{width:'40px',position:'absolute',left:'-49px',top:'1px'}} src='./img4.png'/>
                                <h3 style={{margin:'20px 0 0 0'}}>隐藏电子邮件</h3>
                                <p style={{margin:'0',color:'#908F91'}}>使您的电子邮件地址保密但仍接受来</p>
                                <p style={{margin:'0',color:'#908F91'}}>来自App的邮件</p>
                            </div>
                            <div style={{textAlign:'center',marginTop:'40px',position:'relative'}}>
                                <img style={{width:'40px',position:'absolute',left:'150px',top:'-35px'}} src='./img5.png'/>
                                <p style={{margin:'0',fontSize:'10px',color:'#908F91'}}>设置“通过Apple登录”时，Apple可能会使用有关您Apple ID和设</p>
                                <p style={{margin:'0',fontSize:'10px',color:'#908F91'}}>备使用习惯的信息来帮助防止欺诈行为。<span style={{color:'#3278F6'}}>了解数据的管理方式</span></p>
                            </div>
                        </div>
                    </div>
                    <div className={isShow?"":"back2"} style={{textAlign:'center'}}>
                        <p style={{fontWeight:'bold',fontSize:'15px'}}>使用Apple ID“{dh}”为玩伴</p>
                        <p style={{fontWeight:'bold',fontSize:'15px'}}>创建账户。</p>
                        <div style={{borderTop:'1px solid',borderBottom:'1px solid'}}>
                            <div style={{height:'40px',width:'200px',margin:'0 auto',display:'flex',alignItems:'center'}}>
                                <span style={{display:'block',width:'50px',fontWeight:'bold',color:'#9F9EA1'}}>姓名</span>
                                <Input
                                    placeholder='请输入内容'
                                    value={value}
                                    onChange={val => {
                                        setValue(val)
                                    }}
                                />
                            </div>
                        </div>
                    </div>
                    <div className={isShow?'button1':''} style={{marginTop:'20px',paddingLeft:'150px'}} onClick={()=>{ setIsshow(true) }}>
                        <span style={{borderRadius:'5px',padding:'7px 15px',backgroundColor:'#3378F4',color:'#FFF'}}>继续</span>
                    </div>
                    <div className={isShow?'':'button2'} style={{marginTop:'20px',paddingLeft:'150px'}} onClick={()=>{ dButton() }}>
                        <span style={{borderRadius:'5px',padding:'7px 15px',backgroundColor:'#3378F4',color:'#FFF'}}>登录</span>
                    </div>
                    <hr style={{position:'absolute',bottom:'-5px',left:'120px',backgroundColor:'black',width:'120px',height:'4px',borderRadius:'5px'}}></hr>
            </Popup>
        </div>
    )
}